<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        #canvas{
            margin:0 auto;
            border: 2px solid red;
        }
    </style>
</head>
<body onload="round()">
<canvas id="canvas" width="600" height="600"></canvas>
<script>
    function round(){
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.translate(300,300);
        ctx.strokeStyle = "black";
        ctx.fillStyle = "white";
        ctx.lineWidth = 3;

        /*指针*/
        ctx.save();
        for (var i=0;i<9;i++){
            ctx.beginPath();
            ctx.rotate(Math.PI/4.5);
            ctx.moveTo(100,0);
            ctx.lineTo(142,0);
            ctx.stroke();
        }
        ctx.restore();

        /*/!*数字*!/
        ctx.save();
        ctx.font="bold 20px Arial";
        ctx.fillStyle="#058";
        ctx.save();
        ctx.translate(114, -30);
        ctx.rotate(-90);
        ctx.fillText(1,0,0);
        ctx.restore();
        /!*数字*!/
        ctx.save();
        ctx.font="bold 20px Arial";
        ctx.fillStyle="#058";
        ctx.save();
        ctx.translate(113, 35);
        ctx.rotate(-140);
        ctx.fillText(2,0,0);
        ctx.restore();*/

        /*数字*/
        for (var j=1;j<=9;j++){
            ctx.beginPath();
            ctx.font="bold 20px Arial";
            ctx.fillStyle="#058";
            ctx.fillText(j,114,-30);
//            ctx.translate(-j*30,20);
            ctx.rotate(Math.PI/4.5);
            ctx.save();
            ctx.rotate(30);
            ctx.stroke();
        }
        ctx.restore();

        /*外边缘*/
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#325FA2';
        ctx.arc(0,0,142,0,Math.PI*2,true);
        ctx.stroke();
        ctx.restore();

        /*小圆*/
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#325FA2';
        ctx.arc(0,0,100,0,Math.PI*2,true);
        ctx.stroke();
        ctx.restore();
    }
</script>
</body>
</html>